<template>
    <!--注册页面-->
    <div id="div" style="background:#6c95de;" >
        <div >
            <div style="overflow: hidden">
                <div style="width: 600px;margin-top: 262px;margin-left: 418px;text-align: center;float: left">
                    <img src="../../../public/registerImage/pic@2x.png" width="600px" height="350px"/>
                    <div><h2 style="color: bisque">开店人都在用的收银系统</h2></div>
                </div>
                <div id="from">
                    <div>现在注册,即可免费体验收银系统</div>
                    <div>
                        <span><img style="width: 20px;height: 22px;" src="../../../public/registerImage/姓名.png" height="18" width="16"/></span>
                        <el-input class="input" style="width: 235px" v-model="ShangjiaBo.clerkAccountNumber" placeholder="请输入您要注册的账号"></el-input>
                    </div>
                    <div>
                        <span><img src="../../../public/registerImage/mm.png" height="15" width="12"/></span>
                        <el-input class="input" style="width: 235px" v-model="ShangjiaBo.clerkPassword" placeholder="请输入6-16位密码"></el-input>
                    </div>
                    <div>
                        <span><img src="../../../public/registerImage/姓名1.png" height="15" width="12"/></span>
                        <el-input class="input" style="width: 235px" v-model="ShangjiaBo.clerkName" placeholder="请输入您的真实姓名"></el-input>
                    </div>
                    <div>
                        <span><img src="../../../public/registerImage/年龄.png" height="15" width="12"/></span>
                        <el-input class="input" style="width: 235px" v-model="ShangjiaBo.clerkAge" placeholder="请输入您的年龄"></el-input>
                    </div>
                    <div>
                        <span><img style="width: 20px;height: 22px;" src="../../../public/registerImage/商铺.png" height="18" width="16"/></span>
                        <el-input class="input" style="width: 235px" v-model="ShangjiaBo.buName" placeholder="请输入店铺名称"></el-input>
                    </div>

                    <div>
                        <span><img src="../../../public/registerImage/地址.png" height="15" width="12"/></span>
                        <el-input class="input" style="width: 235px" v-model="ShangjiaBo.buAddress" placeholder="请输入店铺地址"></el-input>
                    </div>

                    <div><span><img src="../../../public/registerImage/sjh.png" height="17" width="10"/></span>
                        <el-input class="input" style="width: 235px" v-model="ShangjiaBo.buPhone" placeholder="请输入手机号" ></el-input>
                    </div>
                    <el-button style="margin-left: 25px;width: 210px;height: 32px;line-height: 10px"  type="primary" @click="zhuce">注册</el-button>
                </div>
            </div>


        </div>
    </div>

</template>

<script>

    export default {
        name: "Register",
        data(){
            return{
                ShangjiaBo:
                    {
                    clerkAccountNumber:"",
                    clerkPassword:"",
                    clerkName:"",
                    clerkAge:"",
                    buName:"",
                    buAddress:"",
                    buPhone:"",
                }
            }
        },
        methods:{
            yz(){
                if(this.ShangjiaBo.clerkAccountNumber=="")
                {
                    alert("账号不能为空")
                    return false
                }
                if(this.ShangjiaBo.clerkPassword=="")
                {
                    alert("密码不能为空")
                    return false
                }
                var regex=null;
                regex =/^[A-Za-z0-9]\w{5,17}$/;
                if(regex.test(this.ShangjiaBo.clerkPassword)==false)
                {
                    alert("密码必须6-16位")
                    return false;
                }

                if(this.ShangjiaBo.clerkName=="")
                {
                    alert("名称不能为空")
                    return false
                }
                if(this.ShangjiaBo.clerkAge=="")
                {
                    alert("年龄不能为空")
                    return false
                }
                if(this.ShangjiaBo.buName=="")
                {
                    alert("商铺名称不能为空")
                    return false
                }
                if(this.ShangjiaBo.buAddress=="")
                {
                    alert("地址不能为空")
                    return false
                }
                if(this.ShangjiaBo.buPhone=="")
                {
                    alert("电话不能为空")
                    return false
                }
            },
            zhuce(){
               if(this.yz()!=false)
               {
                   this.$store.dispatch("zhuce",this.ShangjiaBo);
               }

            }
        }
    }
</script>

<style scoped>

    #div{
        width:100%;
        background:#6c95de;
        height: 920px;
        margin:0 auto;
    }
    span img{
        width: 18px;
        height: 20px;
        margin-right: 5px;
    }
    #from{
        width:350px;
        height:500px;
        float: right;
        margin-top: 200px;
        border-radius: 25px;
        margin-right: 400px;
        text-align: center;
        line-height: 53px;
        background:white;
        color:#6c95de ;
        font-weight: bolder;
    }

</style>